<template>
	<!-- nav -->
	<nav class="nav-primary hidden-xs">
		<ul :class="[item.bg !=null ? item.bg : '', 'nav clearfix']" v-for="item in $store.state.auth.menuTree" :key="item.url" v-show="item.hidden === false">
			<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
				<router-link :to="item.url">
					{{ item.name }}
				</router-link>
			</li>
			<li v-if="item.children != null" v-for="subItem in item.children" :key="subItem.url">
				<router-link :to="subItem.url" v-if="subItem.hidden === false">
					<i v-bind:class="subItem.icon"></i>
					<b class="badge bg-primary pull-right">{{ subItem.messageNum }}</b>
					<span class="font-bold">{{ subItem.name }}</span>
				</router-link>
			</li>
			<li class="m-b hidden-nav-xs"></li>
		</ul>
		<ul class="nav text-sm">
			<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
				<span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
				播放列表
			</li>
			<li>
				<a href="#">
					<i class="icon-music-tone icon"></i>
					<span>大悲咒</span>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="icon-playlist icon text-success-lter"></i>
					<b class="badge bg-success dker pull-right">9</b>
					<span>心经</span>
				</a>
			</li>
		</ul>
	</nav>
	<!-- / nav -->
</template>

<script>
	export default {
		props: {
			menus: {
				type: Array,
				required: true,
				default: () => []
			},
			separator: String
		},
		data() {
			return {
				// menus: this.getMenus()
			}
		},
		mounted() {
			// slim-scroll 滚动条样式
			$('.slim-scroll').each(function() {
				var $self = $(this),
					$data = $self.data(),
					$slimResize;
				$self.slimScroll($data);
				$(window).resize(function(e) {
					clearTimeout($slimResize);
					$slimResize = setTimeout(function() {
						$self.slimScroll($data);
					}, 500);
				});
				$(document).on('updateNav', function() {
					$self.slimScroll($data);
				});
			});
			
			// if(false == this.$store.state.auth.logged && this.$store.state.auth.menuTree == null){
				// this.$api.menu.getTreeByUser().then(menuTree => {
				// 	this.$router.initRoutes(menuTree);
				// 	// this.$store.commit("auth/setMenuTree", menuTree);
				// 	this.$router.replace(this.$router.currentRoute.value.fullPath)
				// });
			// }
		},
		methods: {
			getMenus() {
				// console.debug("getRoutes() : {}", this.$router.getRoutes());
				// return this.$router.getRoutes();
				// return [{
				// 	name: '发现',
				// 	url: 'events',
				// 	iconClass: 'icon-frame icon',
				// 	iconColor: 'text-success',
				// 	messageNum: 8
				// }]

				return [{
						url: '/',
						name: 'Home',
						// redirect: '/',
						component: () => import('@/layout/index.vue'),
						meta: {
							title: "明心见性",
							hidden: false
						},
						children: [{
								url: '/',
								name: 'Home',
								component: () => import('@/views/home'),
								meta: {
									title: "首页",
									icon: 'icon-home icon text-dark',
									hidden: false
								}
							},
							{
								name: 'events',
								url: '/events',
								component: () => import('@/views/events'),
								meta: {
									title: "发现",
									icon: 'icon-frame icon text-success',
									messageNum: 8,
									hidden: false
								}
							},
							{
								name: 'listen',
								url: '/listen',
								component: () => import('@/views/listen'),
								meta: {
									title: "听",
									icon: 'icon-music-tone-alt icon text-info-dker',
									messageNum: null,
									hidden: false
								}
							},
							{
								name: 'video',
								url: '/video',
								component: () => import('@/views/video'),
								meta: {
									title: "看",
									icon: 'icon-social-youtube icon text-primary-lter', //fa fa-video-camera
									messageNum: null,
									hidden: false
								}
							},
							{
								name: 'videoDetail',
								url: '/video/:id',
								component: () => import('@/views/video-detail'),
								meta: {
									title: "视频",
									icon: 'icon-social-youtube icon text-primary',
									hidden: true
								}
							},
							{
								name: 'book',
								url: '/book',
								component: () => import('@/views/book'),
								meta: {
									title: "读",
									icon: 'icon-notebook icon text-success-dker',
									messageNum: null,
									hidden: false
								}
							},
							{
								name: 'bookChapter',
								url: '/book/:id',
								component: () => import('@/views/book-chapter'),
								meta: {
									title: "章节",
									icon: 'icon-list icon text-info-lter',
									messageNum: null,
									hidden: true
								}
							}
						]
					},
					{
						url: '/register',
						name: 'register',
						component: () => import('@/views/register'),
						meta: {
							title: "注册",
							hidden: true
						}
					},
					{
						url: '/login',
						name: 'login',
						component: () => import('@/views/login'),
						meta: {
							title: "登录",
							hidden: true
						}
					},
					{
						url: '/logout',
						name: 'logout',
						meta: {
							title: "退出",
							hidden: true
						},
						beforeEnter(to, from, next) {
							// auth.logout()
							next('/')
						}
					},
					{
						url: "/:urlMatch(.*)*",
						name: '404',
						component: () => import('@/views/404'),
						meta: {
							title: "404",
							hidden: true
						}
					},
					{
						name: 'user',
						url: '/user',
						component: () => import('@/layout/index.vue'),
						meta: {
							title: "用户",
							hidden: false
						},
						children: [{
							name: 'profile',
							url: '/user/profile',
							component: () => import('@/views/user/profile'),
							meta: {
								title: "我的",
								icon: 'fa fa-user-o text-default',
								messageNum: null,
								hidden: false
							}
						}]
					}
				]
			}
		},
	}
</script>

<style>
</style>
